// 做折线图


function lineChart(){
  let myChart = echarts.init(document.querySelector('#line'))
  let option ={

    title:{
  text:'老狗收入表',
  top:'15',
  left:'10',
  textStyle:{
    fontSize:16
  }
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
      axisLabel:{
        color:'#999'
      },
      axisLine:{
        lineStyle:{
          color:'#ccc',
          type:'dashed'
        }
      }
    },
    yAxis: {
      type: 'value',
      splitLine:{
        lineStyle:{
          type:'dashed'
        }
      }

    },
    // 
tooltip:{
  trigger:'axis'
},
    // 
grid:{
  top:'20%'
},
    series: [
      {
        data: [9000,12000,15000,13000,10000,18000,14000,10000,12000,13000,15000,19000],
        type: 'line',
        smooth: true,
        lineStyle:{
          width:'6'
        },

        symbolSize: 10, // 小圆圈的大小
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#499FEE' // 0% 处的颜色
            },{
              offset: 0.8, color: 'rgba(255,255,255,0.2)' // 80% 处的颜色
            }, {
                offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        }
      }
    ],
    color: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
          offset: 0, color: '#499FEE' // 0% 处的颜色
      }, {
          offset: 1, color: '#5D75F0' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    }
  }
  myChart.setOption(option)
}
lineChart()



// 做饼图

function classSalaryChart(){
  let myChart = echarts.init(document.querySelector('#salary'))
  let option =  {
    title: {
      text: '班级薪资分布',
      top: 15,
      left: 10,
      textStyle: {
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      bottom: '6%',
      left: 'center'
    },
    color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
    series: [
      {
        name: '班级薪资分布', // 鼠标移入提示这个名字
        type: 'pie', // 表示图表的类型是 饼图
        radius: ['50%', '64%'], // 饼的半径
        itemStyle: {
          borderRadius: 10, // 每一项的圆角
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false, // 控制标签（文本）不显示
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: '>1万' },
          { value: 735, name: '1~1.5万' },
          { value: 580, name: '1.5-2万' },
          { value: 484, name: '>2万' }
        ]
      }
    ]
  }
  myChart.setOption(option) // 第1个O是大写的
}
classSalaryChart()
// 做柱状图




function zhu(){
  let myChart= echarts.init(document.querySelector('#lines'))
  let option ={
    // 标题配置

    title:{

      text:'每一组薪资',
    left:'center',
    
    textStyle:{  
      top:0,
      
fontSize: 18,
}
        },

// X轴上文字配置

     xAxis: {
       type: 'category',
       data: ['小米', '小明', '小花', '小红', '小张', '小丑', '小草','小牛','小杜'],
       axisLabel:{
        color:'#999'
      },
      axisLine:{
        lineStyle:{
          color:'#ccc',
          
        }
      }

     },

     yAxis: {
       type: 'value',
       
     },
     series: [
      
      {
        data: [12200, 17932, 13901, 13934, 21290, 23300, 13300, 13320,22000],
        type: 'bar',
        name: '期望薪资' // 这个数据的名字，可以在鼠标移入的提示上显示
      },
      {
        data: [22820, 19932, 16901, 15934, 31290, 13300, 14300, 18320,25000],
        type: 'bar',
        name: '就业薪资' // 这个数据的名字，可以在鼠标移入的提示上显示
      }
     ],
     color:[{
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
          offset: 0, color: '#34D39A' // 0% 处的颜色
      }, {
          offset: 1, color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },
    {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
          offset: 0, color: '#499FEE' // 0% 处的颜色
      }, {
          offset: 1, color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },],
// 网格配置（坐标轴这个区域）
grid: {
  // 调整坐标轴区域的位置
  top: 30,
  bottom:50,
  left:70,
  right:30
   
},
// 图例（用于表达 每个图形的意义）
// 需要series中，每项数据必须定义name名字
legend: {
  top: 20
},
// 提示框组件
tooltip: {
  // 提示的触发方式
  // 默认是 item，鼠标放到每一项上才能提示
  // 可选 axis ，鼠标放到轴上即可提示
  trigger: 'axis',
}
  }
  myChart.setOption(option)
}
zhu()
// 做饼图
function  sexSalaryChart(){
  let myChart= echarts.init(document.querySelector('#gender'))
  let option =  {
    title: [{
      text: '男女薪资分布',
      top: 15,
      left: 10,
      textStyle: {
        fontSize: 16
      }
    },
    {
      text: '男',
      top: '50%',
      left: '45%',
      textStyle: {
        fontSize: 12
      }
    },
    {
      text: '女',
      top: '85%',
      left: '45%',
      textStyle: {
        fontSize: 12
      }
    }],
    tooltip: {
      trigger: 'item'
    },
    color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
    series: [
      {
        name: '班级薪资分布', // 鼠标移入提示这个名字
        type: 'pie', // 表示图表的类型是 饼图
        radius: ['20%', '30%'], // 饼的半径
        center:['50%','30%'],
        data: [
          { value: 1048, name: '>1万' },
          { value: 735, name: '1~1.5万' },
          { value: 580, name: '1.5-2万' },
          { value: 484, name: '>2万' }
        ]
      },
      {
        name: '班级薪资分布', // 鼠标移入提示这个名字
        type: 'pie', // 表示图表的类型是 饼图
        radius: ['20%', '30%'], // 饼的半径
        center:['50%','70%'],
        data: [
          { value: 1048, name: '>1万' },
          { value: 735, name: '1~1.5万' },
          { value: 580, name: '1.5-2万' },
          { value: 484, name: '>2万' }
        ]
      }
    ]
  }

  myChart.setOption(option) 
}
sexSalaryChart()


// 坐地图

function mapChart(){
  const mapData = [
    { name: '南海诸岛', value: 0 },
    { name: '北京', value: 3 },
    { name: '天津', value: 2 },
    { name: '上海', value: 4 },
    { name: '重庆', value: 1 },
    { name: '河北', value: 20 },
    { name: '河南', value: 23 },
    { name: '云南', value: 0 },
    { name: '辽宁', value: 15 },
    { name: '黑龙江', value: 12 },
    { name: '湖南', value: 2 },
    { name: '安徽', value: 5 },
    { name: '山东', value: 18 },
    { name: '新疆', value: 0 },
    { name: '江苏', value: 5 },
    { name: '浙江', value: 1 },
    { name: '江西', value: 4 },
    { name: '湖北', value: 3 },
    { name: '广西', value: 2 },
    { name: '甘肃', value: 9 },
    { name: '山西', value: 11 },
    { name: '内蒙古', value: 14 },
    { name: '陕西', value: 14 },
    { name: '吉林', value: 10 },
    { name: '福建', value: 0 },
    { name: '贵州', value: 0 },
    { name: '广东', value: 0 },
    { name: '青海', value: 3 },
    { name: '西藏', value: 0 },
    { name: '四川', value: 1 },
    { name: '宁夏', value: 1 },
    { name: '海南', value: 0 },
    { name: '台湾', value: 0 },
    { name: '香港', value: 0 },
    { name: '澳门', value: 0 }
  ]
  let myChart= echarts.init(document.querySelector('#map'))
  let option =  {

    series:[{
      type:'map',
      map:'china',
    label:{
      show:true,
      fontSize:10,
    },
    itemStyle:{
    areaColor:'#E0FFFF',
    borderColor:'rgba(0,0,0,0.2)'
    },

    emphasis:{
      itemStyle:{
        areaColor: '#34D39A',
       borderWidth: 0,
       shadowBlur :20,
       shadowOffsetX :0,
        shadowOffsetY :0,
       shadowColor :'rgba(0, 0, 0, 0.5)'
      }
    }
    }],
    // 

    visualMap: {
      type: 'continuous', // 表示连续型
      max: 20,
      min: 0,
      text: [20, 0],
      left: 15,
      bottom: 10,
      inRange: { color: ['#fff', '#0075F0'] }  // 从小到大的颜色分别为：#fff 和 #0075F0
    }
  }
  myChart.setOption(option)
}
mapChart()

